---
title: "Row Grouping - Group Rows"
enterprise: true
---
Full width group rows can be used to represent the group structure in the grid.

{% gridExampleRunner title="Enabling Group Rows" name="enabling-group-rows" /%}

## Enabling Group Rows

The example above demonstrates that both `country` and `year` are grouped. No group column is generated, instead using full width
rows to display the group value cells.

Group Rows can be enabled by setting the `groupDisplayType` grid option to `"groupRows"` as shown below:

```{% frameworkTransform=true %}
const gridOptions = {
    groupDisplayType: 'groupRows',
}
```

## Cell Component
The group rows use the `agGroupCellRenderer` component to display the group information, as well as the chevron control
for expanding and collapsing rows.

This can be configured with several [Group Renderer Properties](./grouping-group-rows/#configurable-options) using
the `groupRowRendererParams` grid option. The example below removes the row count. Checkboxes are enabled for row selection with the `checkboxLocation` property.

{% gridExampleRunner title="Group Cell Renderer Configuration" name="renderer-config-group-cell" /%}

The example above demonstrates the following configuration:
```{% frameworkTransform=true %}
const gridOptions = {
    columnDefs: [
        { field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
        // ... other column definitions
    ],
    groupRowRendererParams: {
        suppressCount: true,
    },
    rowSelection: { 
        mode: 'singleRow', 
        checkboxLocation: 'autoGroupColumn',
    }
}
```

### Configurable Options

{% interfaceDocumentation interfaceName="IGroupCellRendererParams" overrideSrc="group-cell-renderer/group-cell-renderer.json" config={ "description": "" } /%}

### Checkbox Selection

The `agGroupCellRenderer` can be configured to show checkboxes for row selection. Setting the [Row Selection](./row-selection/)
`checkboxLocation` property to `'autoGroupColumn'` does not hide the [Checkbox Column](./row-selection-single-row/#customising-the-checkbox-column)
but does prevent any columns configured with `agGroupCellRenderer` from showing checkboxes.

{% gridExampleRunner title="Group Cell Renderer Checkbox Selection" name="renderer-config-checkbox" /%}

The example above demonstrates the following configuration:
```{% frameworkTransform=true %}
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        selectAll: 'all',
        checkboxLocation: 'autoGroupColumn',
    },
}
```

### Custom Inner Renderer

When using the group cell renderer, the `agGroupCellRenderer` component will inherit the grouped columns renderer and display this inside of the group cell,
adjacent to any configured checkboxes, cell count, and the expand/collapse chevron control.

This inner renderer can be overridden with a [Custom Cell Component](./component-cell-renderer/) by setting the `innerRenderer` and `innerRendererParams` properties
on the `groupRowRendererParams` grid option.

{% gridExampleRunner title="Group Cell Renderer Configuration" name="renderer-config-inner" /%}

The example above uses the following configuration to provide a custom inner renderer to the group column:
```{% frameworkTransform=true %}
const gridOptions = {
    autoGroupColumnDef: {
        cellRendererParams: {
            innerRenderer: CustomMedalCellRenderer,
        },
    },
}
```

### Custom Cell Renderer

The Group Cell Renderer can be entirely replaced with a [Custom Cell Component](./component-cell-renderer/) by setting the
`groupRowRenderer` grid option.

{% gridExampleRunner title="Custom Group Cell Renderer" name="renderer-config-custom" /%}

The example above sets a custom cell renderer using the following configuration:
```{% frameworkTransform=true %}
const gridOptions = {
    groupRowRenderer: CustomGroupCellRenderer,
}
```

## Next Up

Continue to the next section to learn about the [Row Group Panel](./grouping-group-panel/).
